<template>
	<div class="alarmGroup">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe738;</i>
				告警管理/
				<span>告警组别配置</span>
			</div>
		</div>
		<div class="right_main">
			<div class="divider2"></div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">
				<div class="import">
					<!-- <el-form-item label="选择工程：" :label-width="formLabelWidth"  prop="game">
						<el-select v-model="ruleForm.game" filterable  placeholder="请搜索或选择游戏" @change="gameChange">
							<el-option v-for="(val,key) in games" :label="val.projectName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="分组名称：" prop="addName" :label-width="formLabelWidth">
						<el-input v-model="ruleForm.addName" placeholder="请输入分组名称"></el-input>
					</el-form-item>
					<el-form-item label="通知方式：" prop="addWay" :label-width="formLabelWidth">
						<el-select v-model="ruleForm.addWay" multiple filterable allow-create placeholder="通知方式" type="success" @change="notifyChange" >
							<el-option v-for="item in notifyTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="语音模板：" prop="addVoice" :label-width="formLabelWidth">
						<el-input v-model="ruleForm.addVoice" placeholder="请输入语音模板"></el-input>
					</el-form-item>
					<el-form-item label="分组描述：" prop="addDesc" :label-width="formLabelWidth">
						<el-input v-model="ruleForm.addDesc" placeholder="请输入分组描述"></el-input>
					</el-form-item>
				</div>
				<el-form-item class="conmit">
					<!-- <el-button type="primary" @click="findForm('ruleForm')" icon="plus">立即查询</el-button> -->
					<el-button type="primary" @click="addForm('ruleForm')" icon="search">立即添加</el-button>
					<el-button @click="reset('ruleForm')">重置</el-button>
					<br>
					<span class="warning">（输入搜索条件，留空搜索全部！）</span>
				</el-form-item>
			</el-form>
			<div class="table">
				<div class="divider2"></div>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column sortable v-for="(val,key) in tableHeader" :prop="val.prop" :key=key :label="val.label" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template scope="scope">
							<el-button type="primary"
				      size="small"
				      @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button
				      size="small"
				      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal"></el-pagination>
			</div>
			<div class="revampForm" v-show="revampShow">
				<div class="revampChoose">
					<div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
					</div>
					<el-form :model="revampForm"  ref="revampForm" label-width="115px" class="demo-ruleForm">
						<h5>修改告警用户配置</h5>
						<!-- <el-form-item label="选择工程："  prop="game">
							<el-select v-model="revampForm.game" filterable  placeholder="请搜索或选择游戏" @change="gameRevamp">
								<el-option v-for="(val,key) in games" :label="val.projectName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item label="分组名称：" prop="addName">
							<el-input v-model="revampForm.addName"></el-input>
						</el-form-item>
						<el-form-item label="通知方式：" prop="addWay">
							<el-select v-model="revampForm.addWay" multiple filterable allow-create placeholder="通知方式" type="success" @change="notifyRevamp" >
								<el-option v-for="item in notifyTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="语音模板：" prop="addVoice">
							<el-input v-model="revampForm.addVoice" width="120px"></el-input>
						</el-form-item>
						<el-form-item label="分组描述：" prop="addDesc">
							<el-input v-model="revampForm.addDesc"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="revampComit('revampForm')">立即修改</el-button>
							<el-button @click="resetForm('revampForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</div>
</template>
<script src="./alarmGroup.js"></script>
<style lang="stylus" rel="stylesheet/stylus" src="./alarmGroup.styl"></style>